<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px}
.hide{display:none}
button{width:50px;}
/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }
/* End hide from IE Mac */ 
/*grade*/
#e4 div{float:left; height:1%; overflow:hidden;}
#e4 div span{float:left; margin-right:2px; line-height:15px; width:15px; height:15px; background:url(../img/pf.gif) no-repeat; text-indent:-9999px; cursor:pointer}
#e4 div span.hover{background-position:left bottom}
#grade_res,#grade_res1{float:left; padding-left:10px; line-height:16px;}
</style>
<script type="text/javascript" src="../js/min/base-min.js"></script>
<script type="text/javascript" src="../js/min/Grade-min.js"></script>
</head>

<body>
<div class="effect clearfix" id="e4">
    <pre>调用方法：new Grade("grade", "grade_res");
    </pre>
	<div id="grade"><span>十分差</span><span>比较差</span><span>一般</span><span>比较好</span><span>十分好</span></div>
	<p id="grade_res"></p>
	<br>
	<br>
    <pre>调用方法：new Grade("grade1", "grade_res1");
    </pre>
	<div id="grade1"><span>1分</span><span>2分</span><span>3分</span><span>4分</span><span>5分</span><span>6分</span><span>7分</span><span>8分</span><span>9分</span><span>10分</span></div>
	<p id="grade_res1"></p>
</div>
</body>
<script>
window.onload = function(){
	new Grade("grade", "grade_res");
	new Grade("grade1", "grade_res1");
}
</script>
</body>
</html>
